<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card class="box-card">
        <div >
          <el-row >
            <el-input
              style="width: 200px"
              size="small"
              clearable
              placeholder="请输入规则名称"
              v-model="ruleName">
            </el-input>
            <el-button type="primary" size="small" v-on:click="fetchData">查询</el-button>
            <el-button-group style="float: right" size="small">
              <el-button type="success" size="small" icon="el-icon-plus" v-on:click="addRule">新增
              </el-button>
            </el-button-group>
          </el-row>
          <el-table
            :data="ruleList"
            stripe
            highlight-current-row
            @current-change="handleCurrentChange"
            v-loading="loading"

            size="mini"
            height="720"
            style="width: 100%">
            <el-table-column
              prop="ruleName"
              width="260"
              label="规则名称"
            >
            </el-table-column>
            <el-table-column
              prop="ruleTypeName"
              width="80"
              label="匹配方式"
            >
            </el-table-column>
            <el-table-column
              prop="sameWeight"
              width="70"
              label="相同权重">
            </el-table-column>
            <el-table-column
              prop="seemWeight"
              width="70"
              label="相似权重">
            </el-table-column>
            <el-table-column
              width="70"
              label="是否启用">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isUse=='1'?true:false"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderby"
              width="60"
              label="排序">
            </el-table-column>
            <el-table-column
              prop="createdate"
              label="创建时间">
              <template slot-scope="scope"> {{ scope.row.createDate| dateFormat }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start" :open-delay=1000>
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="editRule(scope.$index)"
                             circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start" :open-delay=1000>
                  <el-button size="mini" type="danger" icon="el-icon-delete" circle
                             @click="delRule(scope.row.id)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card">
          <div >
            <el-row>
              <el-button size="small" v-on:click="addRuleField" type="success" icon="el-icon-plus"
                         @click="addRuleField" :disabled="!current_rule || current_rule.id == null">新增字段
              </el-button>
            </el-row>
            <el-table
              :data="current_rule.algorithmConfigList"
              stripe
              v-loading="loading"
              size="mini"
              height="720"
              style="width: 100%">
              <el-table-column
                prop="fieldsName"
                width="120"
                label="匹配字段"
              >
              </el-table-column>
              <el-table-column
                prop="weight"
                width="70"
                label="匹配权重"
              >
              </el-table-column>
              <el-table-column
                width="70"
                label="是否启用">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.enable=='1'?true:false"/>
                </template>
              </el-table-column>

              <el-table-column
                prop="orderby"
                width="60"
                label="排序">
              </el-table-column>
              <el-table-column
                prop="createDate"
                label="创建时间">
                <template slot-scope="scope"> {{ scope.row.createDate| dateFormat }}</template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top-start" :open-delay=1000>
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="editRuleField(scope.$index)"
                               circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start" :open-delay=1000>
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle
                               @click="delRuleField(scope.row.id)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-dialog title="新增规则" :visible.sync="dialogRuleFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="80px" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="规则名称" prop="ruleName">
                <el-input v-model="ruleForm.ruleName" autocomplete="off" style="width:200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="匹配方式" prop="ruleType">
                <el-select v-model="ruleForm.ruleType">
                  <el-option label="绝对匹配" :value="1"></el-option>
                  <el-option label="相似匹配" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="ruleForm.ruleType==2">
            <el-col :span="12">
              <el-form-item label="相同权重" prop="sameWeight">
                <el-input-number v-model="ruleForm.sameWeight" :min="0" :max="100"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="相似权重" prop="seemWeight">
                <el-input-number v-model="ruleForm.seemWeight" :min="0" :max="100"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="排序号">
                <el-input-number v-model="ruleForm.orderby" :min="1" :max="100"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用">
                <el-switch
                  v-model="ruleForm.isUse" :active-value="1" :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogRuleFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveRule">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新增字段" :visible.sync="dialogRuleFieldFormVisible">
        <el-form :model="ruleFieldForm" :rules="fields" ref="ruleFieldForm" label-position="right" label-width="80px"
                 size="mini">
          <el-form-item label="选择字段" prop="fields">
            <el-select v-model="ruleFieldForm.fields" @change="selectGet">
              <el-option v-for="item in columnList" :label="item.aliseName" :value="item.fieldName"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="current_rule.ruleType=='2'" label="权重" prop="weight">
            <el-input-number v-model="ruleFieldForm.weight" :min="0" :max="100"></el-input-number>
          </el-form-item>

          <el-form-item label="排序号">
            <el-input-number v-model="ruleFieldForm.orderby" :min="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="启用">
            <el-switch
              v-model="ruleFieldForm.enable" :active-value="1" :inactive-value="0">
            </el-switch>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogRuleFieldFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveRuleField">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { getAllRuleList, saveRule, delRule, saveRuleField,delRuleField } from '@/api/ruleconfig'
import { getAllColumn } from '@/api/columns'

export default {
  data() {
    return {
      ruleName: '',
      loading: false,
      ruleList: [],
      current_rule: {
        id:null,
        algorithmConfigList:[]
      },
      ruleForm: {},
      ruleFieldForm: {},
      dialogRuleFormVisible: false,
      dialogRuleFieldFormVisible: false,
      columnList: [],
      rules: {
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        ruleType: [
          { required: true, message: '请选择匹配方式', trigger: 'blur' }
        ],
        sameWeight: [
          { required: true, message: '请输入相同权重值', trigger: 'blur' }
        ],
        seemWeight: [
          { required: true, message: '请输入相似权重值', trigger: 'blur' }
        ]
      },
      fields: {
        fields: [
          { required: true, message: '请选择一个字段', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入权重', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
    getAllColumn().then(resp => {
      this.columnList = resp.data
    })
  },
  methods: {
    fetchData() {
      this.loading = true
      getAllRuleList().then(response => {
        this.ruleList = response.data
        this.current_rule.algorithmConfigList = []
        this.current_rule.id = null
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      if(val){
        this.current_rule = val
      }
    },
    addRule() {
      this.dialogRuleFormVisible = true
      this.ruleForm = {}
      if (this.$refs['ruleForm']) {
        // 延时执行
        this.$nextTick(function() {
          this.$refs['ruleForm'].clearValidate()
        })
      }
    },
    addRuleField() {
      this.dialogRuleFieldFormVisible = true
      this.ruleFieldForm = { weightConfigId: this.current_rule.id }
      if (this.$refs['ruleFieldForm']) {
        // 延时执行
        this.$nextTick(function() {
          this.$refs['ruleFieldForm'].clearValidate()
        })
      }
    },
    editRule(index) {
      this.addRule()
      this.ruleForm = JSON.parse(JSON.stringify(this.ruleList[index]))
    },
    editRuleField(index) {
      this.addRuleField()
      this.ruleFieldForm = JSON.parse(JSON.stringify(this.ruleDetail[index]))
      this.ruleFieldForm.weightconfigid = this.current_rule.id
    },
    saveRule() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          saveRule(this.ruleForm).then(respone => {
            this.dialogRuleFormVisible = false
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.fetchData()
          })
        } else {
          return false
        }
      })
    },
    saveRuleField() {
      this.$refs.ruleFieldForm.validate((valid) => {
        if (valid) {
          saveRuleField(this.ruleFieldForm).then(resp => {
            this.dialogRuleFieldFormVisible = false
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.fetchData()
          })
        } else {
          return false
        }
      })
    },
    delRule(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRule(id).then(resp => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      })
    },
    delRuleField(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRuleField(id).then(resp => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      })
    },
    selectGet(key) {
      const val = this.columnList.find(item => {
        return item.fieldname == key
      })
      if (val) {
        this.ruleFieldForm.fieldsname = val.alisename
      }
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.box-card .el-row{
  padding: 5px 20px 20px 20px;
}
</style>

